<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{*/
            /*margin: 0;*/
            /*padding: 0;*/
        /*}*/

        .one{
            width: 50px;
            height: 50px;
            padding: 50px;
            border: 10px solid peru;
            margin: 0px;
            background-color: red;
            overflow: hidden;
        }

        .two{
            /*
            padding 可以直接写4个方向的距离
            4个: 上 右 下 左
            3个: 上 右 下   左没写 会与右保持一致
            2个: 上 右     左与右一致, 下与上一致
            */
            padding: 10px 20px 30px 40px;
            background-color: #F00;
        }

        .three{
            width: 50px;
            background-color: #ff00e6;
            /*如果想要覆盖
            切记 用小属性 去叠大属性*/
            padding: 10px;
            padding-bottom: 20px;
        }
    </style>

</head>
<body>
<!--什么标签是盒子
所有里面能放东西的标签 都是盒子
比如 div,span,a
比如img 表单.. 就不是盒子

一个盒子主要由4部分组成:
内容 : 设置的宽高 就是设置内容的宽高
padding : 内容到边框的距离
border : 边框的粗细
margin : 从边框以外多少地方不能有其他元素
-->

<div class="one">
    <img src="http://placekitten.com/50/50">
</div>

<div class="three">
    <img src="http://placekitten.com/50/50">
</div>

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>


</body>


</html>